<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>机构统计</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
            $(".ids").click(function () {
                var ss =$(this).data("id");
                $.ajax({
                    type: "POST",
                    url: "${ctx}/sys/firm/firm/jgtonji",
                    data: {"officeId":ss},
                    dataType: "json",
                    success: function(shu){
                        console.log(shu);
                        var zt = [];
                        var sums = [];
                        var myChart = echarts.init(document.getElementById('map'));
                        for (var key in shu) {
                            zt.push(key);
                            sums.push(shu[key]);
                        }
                        var zt1 = ["已报案","报案未回访","已回访待受理","已受理","超期未结案","已结案","已撤单"];
                        console.log(zt);
                        console.log(sums);
                        var option = {
                            title: {
                                text: '当前机构案件统计 单位：件',
                            },
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                },
                                formatter: function (params) {
                                    var tar = params[1];
                                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type : 'category',
                                splitLine: {show:false},
                                data : zt1,
								axisLabel:{
                                    interval:0
								}
                            },
                            yAxis: {
                                type : 'value'
                            },
                            series: [
                                {
                                    name: '辅助',
                                    type: 'bar',
                                    stack:  '总量',
                                    itemStyle: {
                                        normal: {
                                            color: function (params){
                                                var colorList = [
                                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                                ];
                                                return colorList[params.dataIndex]
                                            },
                                            //以下为是否显示
                                            label: {
                                                show: true
                                            }
                                        }
                                    },
                                    data: [0, 0, 0, 0, 0,0, 0,0]
                                },
                                {
                                    name: '处理中',
                                    type: 'bar',
                                    stack: '总量',
                                    itemStyle: {
                                        normal: {
                                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                            color: function(params) {
                                                // build a color map as your need.
                                                var colorList = [
                                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                                    '#FE8463','#26C0C0'
                                                ];
                                                return colorList[params.dataIndex]
                                            },
                                            //以下为是否显示，显示位置和显示格式的设置了
                                            label: {
                                                show: true,
                                                position: 'top',
                                                formatter: '{b}\n{c}'
                                            }
                                        }
                                    },
                                    data:sums
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                })

            })
            $(".ids").trigger("click");
		});
	</script>
</head>
<body>
	<%--<ul class="nav nav-tabs">--%>
		<%--<li class="active"><a>机构统计</a></li>--%>
	<%--</ul><br/>--%>
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
		<tr>
			<th>状态</th>
			<th>统计（数量）</th>
		</tr>
		</thead>
		<tbody>
		<c:forEach items="${list}" var="listvalue">
			<tr>
				<td><a href="#" class="ids" data-id="${officeId}">
					${fns:getDictLabel(listvalue.zt, 'business_static', '')}
				</a></td>
				<td>
						${listvalue.num}
				</td>
			</tr>
		</c:forEach>
		<tr>
			<th>总计</th>
			<th>${ss}</th>
		</tr>
		<tr><td colspan="2" id="map" style="width: 500px;height:300px;"></td></tr>
		</tbody>
	</table>
</body>
</html>